<template>
    <div>
        <h1>父子的生命周期钩子函数调用顺序</h1>
        <div id="box1">{{ msg }}</div>
        <Son :str="msg"></Son>
        <input type="button" value="修改msg" @click="changeMsg">
        <el-button type="primary">按钮</el-button>
    </div>
</template>

<script >
import Son from "./Son.vue"
export default {
    components: {Son},
    data() {
        return {
            msg: "hello vue",
        }
    },
    methods: {
        changeMsg() {
            this.msg += "1";
        }
    },
    beforeCreate() {
        console.log("lifecycle_parentSon父组件：beforeCreate")
    },
    created() {
        console.log("父组件：created");
    },
    beforeMount() {
        console.log("父组件：beforeMount");
    },
    mounted() {
        console.log("父组件：mounted");
      },
    beforeUpdate() {
        console.log("父组件：beforeUpdate");
     },
    updated() {
        console.log("父组件：updated");
 
    },
    beforeUnmount(){
        console.log("父组件：beforeUnmount");
    },
    unmounted(){
        console.log("父组件：unmounted");
    }
}

</script>

<style lang="css" scoped></style>
